<template>
  <div class="app-container fishery-home">
    <!-- 欢迎信息 -->
    <div class="welcome-container">
      <div class="welcome-left">
        <h1>🐟 渔业监控平台</h1>
        <p class="welcome-subtitle">欢迎回来，{{ name }} | {{ today }} | 实时监控您的渔场</p>
      </div>
      <div class="welcome-right">
        <el-button type="primary" icon="el-icon-video-camera" @click="startRealTimeMonitor">启动实时监控</el-button>
        <el-button type="success" icon="el-icon-warning" @click="viewAlarms">查看告警</el-button>
      </div>
    </div>

    <!-- 实时监控状态指示器 -->
    <div class="monitor-status-bar">
      <div class="status-item" :class="{'online': systemStatus.camera}">
        <i class="el-icon-video-camera"></i>
        <span>摄像头状态: {{ systemStatus.camera ? '在线' : '离线' }}</span>
      </div>
      <div class="status-item" :class="{'online': systemStatus.ai}">
        <i class="el-icon-cpu"></i>
        <span>AI检测: {{ systemStatus.ai ? '运行中' : '已停止' }}</span>
      </div>
      <div class="status-item" :class="{'online': systemStatus.sensors}">
        <i class="el-icon-connection"></i>
        <span>传感器: {{ systemStatus.sensors ? '正常' : '异常' }}</span>
      </div>
      <div class="status-item" :class="{'online': systemStatus.network}">
        <i class="el-icon-link"></i>
        <span>网络连接: {{ systemStatus.network ? '正常' : '断开' }}</span>
      </div>
    </div>

    <!-- 核心数据统计卡片 -->
    <el-row :gutter="20" class="stat-cards">
      <el-col :xs="24" :sm="12" :md="12" :lg="6" v-for="(item, index) in fisheryStats" :key="index">
        <el-card shadow="hover" :body-style="{ padding: '20px' }">
          <div class="stat-card-content">
            <div class="stat-card-icon" :style="{ backgroundColor: item.bgColor }">
              <i :class="item.icon"></i>
            </div>
            <div class="stat-card-info">
              <div class="stat-card-title">{{ item.title }}</div>
              <div class="stat-card-value">{{ item.value }}</div>
              <div class="stat-card-change" :class="{'up': item.change > 0, 'down': item.change < 0, 'normal': item.change === 0}">
                <i v-if="item.change !== 0" :class="item.change > 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
                <i v-else class="el-icon-minus"></i>
                {{ item.change === 0 ? '正常' : Math.abs(item.change) + (item.unit || '%') + ' 较昨日' }}
              </div>
              <div class="stat-card-extra" v-if="item.extra">{{ item.extra }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 环境监测区域 -->
    <el-row :gutter="20" class="chart-section">
      <el-col :xs="24" :lg="24">
        <el-card shadow="hover" class="chart-card">
          <div slot="header" class="chart-header">
            <span>🌊 环境参数监测</span>
            <el-radio-group v-model="envTimeRange" size="mini">
              <el-radio-button label="hour">1小时</el-radio-button>
              <el-radio-button label="day">24小时</el-radio-button>
              <el-radio-button label="week">7天</el-radio-button>
            </el-radio-group>
          </div>
          <div class="chart-container">
            <div class="env-chart">
              <div class="chart-legend">
                <div class="legend-item water-temp">
                  <span class="legend-color"></span>
                  <span>水温 (°C)</span>
                </div>
                <div class="legend-item ph-level">
                  <span class="legend-color"></span>
                  <span>pH值</span>
                </div>
                <div class="legend-item oxygen-level">
                  <span class="legend-color"></span>
                  <span>溶氧量 (mg/L)</span>
                </div>
              </div>
              <div class="chart-lines">
                <div class="env-line-chart">
                  <div v-for="(item, index) in environmentalData" :key="index" class="chart-line-item">
                    <div class="chart-time-label">{{ item.time }}</div>
                    <div class="chart-values">
                      <div class="value-bar temp" :style="{ height: (item.temperature/40*100) + '%' }" :title="`水温: ${item.temperature}°C`"></div>
                      <div class="value-bar ph" :style="{ height: (item.ph/14*100) + '%' }" :title="`pH: ${item.ph}`"></div>
                      <div class="value-bar oxygen" :style="{ height: (item.oxygen/15*100) + '%' }" :title="`溶氧: ${item.oxygen}mg/L`"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
    </el-row>

    <!-- 告警和最近活动 -->
    <el-row :gutter="20" class="activity-section">
      <el-col :xs="24" :lg="12">
        <el-card shadow="hover" class="alarm-card">
          <div slot="header" class="alarm-header">
            <span>⚠️ 告警信息</span>
            <el-badge :value="unreadAlarms" class="alarm-badge">
              <el-button type="text" @click="viewAllAlarms">查看全部</el-button>
            </el-badge>
          </div>
          <div class="alarm-list">
            <div v-for="(alarm, index) in recentAlarms" :key="index" class="alarm-item" :class="alarm.level">
              <div class="alarm-icon">
                <i :class="getAlarmIcon(alarm.level)"></i>
              </div>
              <div class="alarm-content">
                <div class="alarm-message">{{ alarm.message }}</div>
                <div class="alarm-time">{{ alarm.time }}</div>
              </div>
              <div class="alarm-status">
                <el-tag :type="getAlarmTagType(alarm.status)">{{ alarm.status }}</el-tag>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :lg="12">
        <el-card shadow="hover" class="activity-card">
          <div slot="header" class="activity-header">
            <span>📋 系统活动</span>
            <el-button type="text" @click="refreshActivities">刷新</el-button>
          </div>
          <div class="activity-list">
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in systemActivities"
                :key="index"
                :timestamp="activity.time"
                :type="activity.type"
                :color="activity.color"
                :size="activity.size">
                {{ activity.content }}
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷功能入口 -->
    <el-card shadow="hover" class="shortcut-card">
      <div slot="header" class="shortcut-header">
        <span>🚀 快捷功能</span>
      </div>
      <div class="shortcut-grid">
        <div class="shortcut-item" v-for="(item, index) in fisheryShortcuts" :key="index" @click="navigateTo(item.path)">
          <div class="shortcut-icon" :style="{ backgroundColor: item.bgColor }">
            <i :class="item.icon"></i>
          </div>
          <div class="shortcut-title">{{ item.title }}</div>
          <div class="shortcut-desc">{{ item.description }}</div>
        </div>
      </div>
    </el-card>

    <!-- 设备状态监控 -->
    <el-card shadow="hover" class="device-card">
      <div slot="header" class="device-header">
        <span>📱 设备状态监控</span>
        <div class="device-summary">
          <el-tag type="success">{{ deviceStats.online }}台在线</el-tag>
          <el-tag type="danger">{{ deviceStats.offline }}台离线</el-tag>
        </div>
      </div>
      <div class="device-list">
        <el-table :data="deviceStatus" style="width: 100%" border>
          <el-table-column prop="name" label="设备名称" width="180">
            <template slot-scope="scope">
              <div class="device-name">
                <i :class="getDeviceIcon(scope.row.type)"></i>
                {{ scope.row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="设备类型" width="120">
            <template slot-scope="scope">
              <el-tag :type="getDeviceTypeTag(scope.row.type)" size="mini">{{ scope.row.typeName }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="location" label="安装位置" width="150"></el-table-column>
          <el-table-column label="运行状态" width="120">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status === '在线' ? 'success' : 'danger'" size="mini">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="lastUpdate" label="最后更新" width="180"></el-table-column>
          <el-table-column label="信号强度" width="100">
            <template slot-scope="scope">
              <el-progress :percentage="scope.row.signal" :stroke-width="6" :show-text="false"></el-progress>
              <span class="signal-text">{{ scope.row.signal }}%</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="viewDeviceDetail(scope.row)">详情</el-button>
              <el-button type="text" size="small" @click="controlDevice(scope.row)">控制</el-button>
              <el-button type="text" size="small" @click="resetDevice(scope.row)">重启</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: "Index",
  data() {
    return {
      today: this.formatDate(new Date()),
      envTimeRange: 'day',
      
      // 系统状态
      systemStatus: {
        camera: true,
        ai: true,
        sensors: true,
        network: true
      },
      
      // 渔业核心数据统计
      fisheryStats: [
        { 
          title: '鱼类总数', 
          value: '12,465', 
          change: 8.2, 
          unit: '%',
          icon: 'el-icon-s-data',
          bgColor: '#409EFF',
          extra: '比目标多35条'
        },
        { 
          title: '水质指数', 
          value: '92.5', 
          change: 0, 
          icon: 'el-icon-odometer',
          bgColor: '#67C23A',
          extra: '优良'
        },
        { 
          title: '水温', 
          value: '24.3°C', 
          change: 1.2, 
          unit: '°C',
          icon: 'el-icon-view',
          bgColor: '#E6A23C',
          extra: '适宜范围'
        },
        { 
          title: '设备在线率', 
          value: '96.7%', 
          change: -2.1, 
          unit: '%',
          icon: 'el-icon-connection',
          bgColor: '#F56C6C',
          extra: '2台离线'
        }
      ],

      // 环境监测数据
      environmentalData: [
        { time: '00:00', temperature: 23.5, ph: 7.2, oxygen: 8.5 },
        { time: '04:00', temperature: 23.2, ph: 7.1, oxygen: 8.3 },
        { time: '08:00', temperature: 24.1, ph: 7.3, oxygen: 8.7 },
        { time: '12:00', temperature: 25.2, ph: 7.4, oxygen: 8.9 },
        { time: '16:00', temperature: 26.1, ph: 7.2, oxygen: 8.6 },
        { time: '20:00', temperature: 25.3, ph: 7.0, oxygen: 8.4 },
        { time: '24:00', temperature: 24.3, ph: 7.2, oxygen: 8.5 }
      ],


      // 告警信息
      unreadAlarms: 3,
      recentAlarms: [
        {
          level: 'critical',
          message: '1号池塘水温异常，当前温度28.5°C，超出适宜范围',
          time: '5分钟前',
          status: '未处理'
        },
        {
          level: 'warning',
          message: '2号摄像头信号不稳定，可能影响AI检测精度',
          time: '15分钟前',
          status: '处理中'
        },
        {
          level: 'info',
          message: 'AI模型更新完成，检测精度提升至94.7%',
          time: '1小时前',
          status: '已完成'
        },
        {
          level: 'warning',
          message: '投料设备维护提醒，建议今日进行例行检查',
          time: '2小时前',
          status: '未处理'
        }
      ],

      // 系统活动
      systemActivities: [
        { 
          content: 'AI检测服务重启完成，当前运行正常', 
          time: '10分钟前', 
          type: 'success',
          color: '#67C23A',
          size: 'normal'
        },
        { 
          content: '新增鱼类检测模型 YOLOv8-Fish-v2.1', 
          time: '1小时前', 
          type: 'primary',
          color: '#409EFF',
          size: 'normal' 
        },
        { 
          content: '定时投料任务执行完成：3号池塘', 
          time: '2小时前', 
          type: 'info',
          color: '#909399',
          size: 'normal' 
        },
        { 
          content: '水质监测异常：pH值超出正常范围', 
          time: '昨天 16:24', 
          type: 'danger',
          color: '#F56C6C',
          size: 'normal' 
        },
        { 
          content: '每日水质数据报表生成完成', 
          time: '昨天 08:00', 
          type: 'warning',
          color: '#E6A23C',
          size: 'normal' 
        }
      ],

      // 渔业快捷功能
      fisheryShortcuts: [
        { 
          title: '实时监控', 
          icon: 'el-icon-video-camera', 
          path: '/fishery/realtime-monitor',
          bgColor: 'rgba(64, 158, 255, 0.1)',
          description: '启动AI实时检测'
        },
        { 
          title: '鱼类管理', 
          icon: 'el-icon-s-data', 
          path: '/fishery/fish-management',
          bgColor: 'rgba(103, 194, 58, 0.1)',
          description: '鱼类信息统计'
        },
        { 
          title: '环境监测', 
          icon: 'el-icon-odometer', 
          path: '/fishery/environment',
          bgColor: 'rgba(230, 162, 60, 0.1)',
          description: '水质温度监控'
        },
        { 
          title: '设备控制', 
          icon: 'el-icon-setting', 
          path: '/fishery/device-control',
          bgColor: 'rgba(245, 108, 108, 0.1)',
          description: '投料增氧控制'
        },
        { 
          title: '告警中心', 
          icon: 'el-icon-warning', 
          path: '/fishery/alarm-center',
          bgColor: 'rgba(255, 193, 7, 0.1)',
          description: '异常告警管理'
        },
        { 
          title: '数据报表', 
          icon: 'el-icon-data-line', 
          path: '/fishery/reports',
          bgColor: 'rgba(121, 187, 255, 0.1)',
          description: '数据分析统计'
        }
      ],

      // 设备状态
      deviceStats: {
        online: 28,
        offline: 2
      },
      
      deviceStatus: [
        {
          name: '1号池塘摄像头',
          type: 'camera',
          typeName: '摄像头',
          location: '1号养殖池东北角',
          status: '在线',
          lastUpdate: '2024-01-15 14:30:25',
          signal: 92
        },
        {
          name: '2号池塘摄像头',
          type: 'camera', 
          typeName: '摄像头',
          location: '2号养殖池中央',
          status: '在线',
          lastUpdate: '2024-01-15 14:30:22',
          signal: 78
        },
        {
          name: '水质传感器A1',
          type: 'sensor',
          typeName: '传感器',
          location: '1号池塘入水口',
          status: '在线',
          lastUpdate: '2024-01-15 14:29:45',
          signal: 95
        },
        {
          name: '投料设备B2',
          type: 'feeder',
          typeName: '投料机',
          location: '2号池塘西侧',
          status: '离线',
          lastUpdate: '2024-01-15 12:15:30',
          signal: 0
        },
        {
          name: '增氧设备C3',
          type: 'oxygenator',
          typeName: '增氧机',
          location: '3号池塘中央',
          status: '在线',
          lastUpdate: '2024-01-15 14:30:18',
          signal: 88
        }
      ]
    };
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
    formatDate(date) {
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${year}年${month}月${day}日`;
    },
    
    // 启动实时监控
    startRealTimeMonitor() {
      this.$router.push('/fishery/realtime-monitor');
      this.$message.success('正在跳转到实时监控页面...');
    },
    
    // 查看告警
    viewAlarms() {
      this.$router.push('/fishery/alarm-center');
      this.$message.info('查看告警信息');
    },
    
    // 刷新活动列表
    refreshActivities() {
      this.$message.success('活动列表已刷新');
    },
    
    // 导航到指定页面
    navigateTo(path) {
      this.$router.push(path);
    },
    
    // 查看所有告警
    viewAllAlarms() {
      this.$router.push('/fishery/alarm-center');
    },
    
    // 获取告警图标
    getAlarmIcon(level) {
      switch(level) {
        case 'critical': return 'el-icon-error';
        case 'warning': return 'el-icon-warning';
        case 'info': return 'el-icon-info';
        default: return 'el-icon-info';
      }
    },
    
    // 获取告警标签类型
    getAlarmTagType(status) {
      switch(status) {
        case '未处理': return 'danger';
        case '处理中': return 'warning';
        case '已完成': return 'success';
        default: return 'info';
      }
    },
    
    // 获取设备图标
    getDeviceIcon(type) {
      switch(type) {
        case 'camera': return 'el-icon-video-camera';
        case 'sensor': return 'el-icon-connection';
        case 'feeder': return 'el-icon-s-goods';
        case 'oxygenator': return 'el-icon-setting';
        default: return 'el-icon-connection';
      }
    },
    
    // 获取设备类型标签
    getDeviceTypeTag(type) {
      switch(type) {
        case 'camera': return 'primary';
        case 'sensor': return 'success';
        case 'feeder': return 'warning';
        case 'oxygenator': return 'info';
        default: return 'info';
      }
    },
    
    // 查看设备详情
    viewDeviceDetail(device) {
      this.$message.success(`查看设备详情：${device.name}`);
      // 这里可以打开设备详情弹窗或跳转到详情页
    },
    
    // 控制设备
    controlDevice(device) {
      this.$message.success(`控制设备：${device.name}`);
      // 这里可以打开设备控制面板
    },
    
    // 重启设备
    resetDevice(device) {
      this.$confirm(`确认重启设备"${device.name}"吗?`, '设备重启', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success(`设备 ${device.name} 重启指令已发送`);
        // 这里调用重启设备的API
      }).catch(() => {
        this.$message.info('已取消重启');
      });
    }
  }
};
</script>

<style scoped lang="scss">
.fishery-home {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
  
  // 欢迎区域
  .welcome-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
    
    .welcome-left {
      h1 {
        font-size: 28px;
        color: white;
        margin: 0;
        margin-bottom: 8px;
        font-weight: 600;
      }
      
      .welcome-subtitle {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.9);
        margin: 0;
      }
    }
    
    .welcome-right {
      .el-button {
        margin-left: 10px;
      }
    }
  }
  
  // 监控状态栏
  .monitor-status-bar {
    display: flex;
    justify-content: space-around;
    background: white;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    
    .status-item {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #909399;
      
      i {
        margin-right: 8px;
        font-size: 16px;
      }
      
      &.online {
        color: #67C23A;
      }
    }
  }
  
  // 数据统计卡片
  .stat-cards {
    margin-bottom: 20px;
    
    .stat-card-content {
      display: flex;
      align-items: center;
      
      .stat-card-icon {
        width: 60px;
        height: 60px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        
        i {
          font-size: 28px;
          color: #fff;
        }
      }
      
      .stat-card-info {
        flex: 1;
        
        .stat-card-title {
          font-size: 14px;
          color: #909399;
          margin-bottom: 8px;
        }
        
        .stat-card-value {
          font-size: 24px;
          font-weight: bold;
          color: #303133;
          margin-bottom: 5px;
        }
        
        .stat-card-change {
          font-size: 12px;
          
          &.up {
            color: #67C23A;
          }
          
          &.down {
            color: #F56C6C;
          }
          
          &.normal {
            color: #409EFF;
          }
        }
        
        .stat-card-extra {
          font-size: 11px;
          color: #C0C4CC;
          margin-top: 4px;
        }
      }
    }
  }
  
  // 图表区域
  .chart-section {
    margin-bottom: 20px;
    
    .chart-card, .activity-card {
      height: 400px;
      
      .chart-header, .activity-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      
      .chart-container {
        height: 320px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .env-chart {
          width: 100%;
          height: 280px;
          
          .chart-legend {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            
            .legend-item {
              display: flex;
              align-items: center;
              margin: 0 15px;
              font-size: 12px;
              
              .legend-color {
                width: 12px;
                height: 12px;
                border-radius: 2px;
                margin-right: 5px;
              }
              
              &.water-temp .legend-color {
                background-color: #E6A23C;
              }
              
              &.ph-level .legend-color {
                background-color: #409EFF;
              }
              
              &.oxygen-level .legend-color {
                background-color: #67C23A;
              }
            }
          }
          
          .env-line-chart {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            height: 200px;
            padding: 0 20px;
            
            .chart-line-item {
              display: flex;
              flex-direction: column;
              align-items: center;
              width: 12%;
              
              .chart-time-label {
                margin-bottom: 8px;
                font-size: 10px;
                color: #909399;
              }
              
              .chart-values {
                display: flex;
                align-items: flex-end;
                height: 160px;
                
                .value-bar {
                  width: 8px;
                  margin: 0 1px;
                  border-radius: 2px 2px 0 0;
                  transition: height 0.5s ease;
                  cursor: pointer;
                  
                  &.temp {
                    background: linear-gradient(to top, #E6A23C, #EEBE77);
                  }
                  
                  &.ph {
                    background: linear-gradient(to top, #409EFF, #66B1FF);
                  }
                  
                  &.oxygen {
                    background: linear-gradient(to top, #67C23A, #85CE61);
                  }
                }
              }
            }
          }
        }
      }
      

      .activity-list {
        height: 320px;
        overflow-y: auto;
        padding: 0 10px;
      }
    }
  }
  
  // 告警和活动区域
  .activity-section {
    margin-bottom: 20px;
    
    .alarm-card {
      .alarm-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .alarm-badge {
          .el-badge__content {
            background-color: #F56C6C;
          }
        }
      }
      
      .alarm-list {
        height: 320px;
        overflow-y: auto;
        
        .alarm-item {
          display: flex;
          align-items: center;
          padding: 15px;
          border-bottom: 1px solid #EBEEF5;
          transition: all 0.3s;
          
          &:hover {
            background-color: #F5F7FA;
          }
          
          .alarm-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            
            i {
              font-size: 18px;
            }
          }
          
          .alarm-content {
            flex: 1;
            
            .alarm-message {
              font-size: 14px;
              color: #303133;
              margin-bottom: 5px;
            }
            
            .alarm-time {
              font-size: 12px;
              color: #909399;
            }
          }
          
          .alarm-status {
            margin-left: 10px;
          }
          
          &.critical {
            .alarm-icon {
              background-color: rgba(245, 108, 108, 0.1);
              color: #F56C6C;
            }
          }
          
          &.warning {
            .alarm-icon {
              background-color: rgba(230, 162, 60, 0.1);
              color: #E6A23C;
            }
          }
          
          &.info {
            .alarm-icon {
              background-color: rgba(64, 158, 255, 0.1);
              color: #409EFF;
            }
          }
        }
      }
    }
  }
  
  // 快捷功能入口
  .shortcut-card {
    margin-bottom: 20px;
    
    .shortcut-header {
      margin-bottom: 15px;
    }
    
    .shortcut-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 20px;
      
      @media (max-width: 1400px) {
        grid-template-columns: repeat(4, 1fr);
      }
      
      @media (max-width: 992px) {
        grid-template-columns: repeat(3, 1fr);
      }
      
      @media (max-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
      }
      
      .shortcut-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        padding: 15px;
        border-radius: 8px;
        transition: all 0.3s;
        
        &:hover {
          background-color: #f2f6fc;
          transform: translateY(-5px);
        }
        
        .shortcut-icon {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 10px;
          
          i {
            font-size: 24px;
            color: #409EFF;
          }
        }
        
        .shortcut-title {
          font-size: 14px;
          color: #303133;
          margin-bottom: 5px;
        }
        
        .shortcut-desc {
          font-size: 12px;
          color: #909399;
          text-align: center;
        }
      }
    }
  }
  
  // 设备状态监控
  .device-card {
    margin-bottom: 20px;
    
    .device-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .device-summary {
        .el-tag {
          margin-left: 10px;
        }
      }
    }
    
    .device-list {
      .device-name {
        display: flex;
        align-items: center;
        
        i {
          margin-right: 8px;
          font-size: 16px;
        }
      }
      
      .signal-text {
        font-size: 12px;
        color: #909399;
        margin-left: 5px;
      }
    }
  }
  
  // 响应式设计
  @media (max-width: 768px) {
    .welcome-container {
      flex-direction: column;
      text-align: center;
      
      .welcome-right {
        margin-top: 15px;
        
        .el-button {
          margin: 5px;
        }
      }
    }
    
    .monitor-status-bar {
      flex-wrap: wrap;
      
      .status-item {
        margin: 5px 10px;
      }
    }
    
    .shortcut-grid {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }
  
  @media (max-width: 480px) {
    padding: 10px;
    
    .shortcut-grid {
      grid-template-columns: 1fr !important;
    }
    
    .stat-cards {
      .el-col {
        margin-bottom: 20px;
      }
    }
  }
  
  // 动画效果
  @keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  @keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(102, 126, 234, 0); }
    100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); }
  }
}
</style>

